<template>
  <dropdown-toolbar title="emoji" :visible="state.visible" @on-change="onChange">
    <template #overlay>
      <div class="emoji-container">
        <ol class="emojis">
          <li
              v-for="(emoji, index) of emojis"
              :key="`emoji-${index}`"
              @click="emojiHandler(emoji)"
              v-text="emoji"
          ></li>
        </ol>
      </div>
    </template>
    <template #trigger>
      emoji
    </template>
  </dropdown-toolbar>
</template>

<script lang="ts" setup>
import type {PropType} from "vue";
import {reactive} from "vue";
import type {InsertContentGenerator} from "md-editor-v3";
import MdEditor from "md-editor-v3";
import {emojis} from "./data";

const DropdownToolbar = MdEditor.DropdownToolbar;
// eslint-disable-next-line no-undef
const props = defineProps({
  onInsert: {
    type: Function as PropType<(generator: InsertContentGenerator) => void>,
    default: () => () => null
  }
});
const state = reactive({
  visible: false
});
const emojiHandler = (emoji: string) => {
  const generator: InsertContentGenerator = () => {
    return {
      targetValue: emoji,
      select: true,
      deviationStart: 0,
      deviationEnd: 0
    };
  };
  props.onInsert(generator);
};
const onChange = (visible: boolean) => {
  state.visible = visible;
};
</script>

<script lang="ts">
export default {
  name: "EmojiExtension"
};
</script>